<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-exact-active{
            color:red;
            padding:0 5px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h3>路由-router-link的基本使用</h3>
        <nav>
            <router-link to="/">主页</router-link>
            <router-link to="/add">添加</router-link>
            <router-link to="/find">查询</router-link>
            <router-link to="/404">模拟不存在的路由</router-link>

        </nav>
        <!-- //    在vue的模板中，添加一个router-view组件，用指装入当前要显示的组件 -->
        <router-view></router-view>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>

        // routes 匹配的规则
        // 当地址栏的路由变化时，它取出hash值，根据routes中的数组的元素下标顺序，
        // 依次去匹配path
        //    如果匹配成功，则显示对应的component
        //    如果所有的规则都不成功，则在router-view处是一个空白

        // 技巧：
        // 在路由规则最后一个元素设置 "*"(匹配所有的)，用来表示404页面
        

        
        const myrouter = new VueRouter({
            
            routes: [
                // path是hash值，component是组件，就是显示的内容
                {path: '/',component:{template: `<div>我是主页!!!!!</div>`}},
                {path: '/add',component:{template: `<div>我是添加1</div>`}},
                {path: '/find',component:{template: `<div>我是查询</div>`}},
                
                {path: '*',component:{template: `<div>你要访问的页面不存在，404！！！！</div>`}},

            ]
        })

  
        new Vue({
            el: '#app',
            data:{},
            methods:{},
            router: myrouter// 用来设置路由对象 
        })


    </script>
</body>
</html>